<template>
	<view class="content">
		<view class="padding-about-30 padding-top-30">
			<view class="background">
				<view class="padding-top-30 display-flex">
					<view style="width: 50%;" class="color-FFF margin-left-40 ">

						<view class="font-size-36 font-weight-bold">
							{{userinfo?.show_card_count?.card_all}}
						</view>
						<view class="font-size-22">
							总卡库存
						</view>
					</view>
					<view style="width: 50%;" class="color-FFF  ">

						<view class="font-size-36 font-weight-bold">
							{{userinfo?.show_card_count?.open_card_all}}
						</view>
						<view class="font-size-22">
							开卡总量
						</view>
					</view>
					<!-- <view @click="navigateTo('/pages/my/Withdrawal')" class="button margin-right-30">
						提现
					</view> -->
				</view>
				<view class=" margin-top-40">
					<uv-gap height="1" bgColor="#F5F5F5"></uv-gap>
				</view>
				<view class="color-FFF display-flex align-items space-between margin-top-30">
					<view class="font-size-24 margin-left-30">
						本月开卡：{{userinfo?.show_card_count?.open_month_card_all}}
					</view>
					<view class="font-size-24 margin-left-30">
						本周开卡：{{userinfo?.show_card_count?.open_week_card_all}}
					</view>
					<view class="font-size-24 margin-right-30">
						今日开卡：{{userinfo?.show_card_count?.open_today_card_all}}
					</view>
				</view>
			</view>
			<view class="margin-top-30 view">
				<view class="display-flex space-between align-items">
					<view class="time file-1 display-flex align-items">
						<input type="text"  v-model="mobile" class="font-size-26 margin-left-30 file-1" placeholder="请输入下级手机号" />
					</view>
					<view style="padding: 20rpx;" @click="search()" class="button border-radius-12 margin-left-30 color-FFF font-size-24">
						搜索
					</view>
				</view>
				<view class="">
					<view v-for="item,index in list"
						:key="index" class="viewitem margin-top-20">
						<view class=" display-flex align-items">
							<image :src="item.avatar" style="width: 78rpx;height: 78rpx;" class="border-radius-12"
								mode=""></image>
							<view   class="file-1 margin-left-20 display-flex space-between align-items">
								<view class=""  @click="navigateTo('/pages/my/subordinate?id=' + item.id + '&mobile=' + item.mobile)">
									<view class="font-size-26 ">
										{{item.nickname_text}}
									</view>
									<view class="font-size-22 color-999">
										{{item.mobile}}
									</view>
								</view>
								<view style="padding: 20rpx;"
									class="button border-radius-12 margin-left-30 color-FFF font-size-24"  @click="navigateTo('/pages/my/cardTransfer/cardTransfer?nickname=' + item.nickname + '&mobile=' + item.mobile)">
									转卡
								</view>
							</view>
						</view>
						<view class="padding-top-30 font-size-26 display-flex" @click="navigateTo('/pages/my/subordinate?id=' + item.id + '&mobile=' + item.mobile)" >
							<view style="width: 50%;" class="">
								总库存: {{item.show_card_count.card_all}}
							</view>
							<view style="width: 50%;" class="">
								现有库存: {{item.show_card_count.card_all}}
							</view>
						</view>
						<view class=" margin-top-20">
							<uv-gap height="1" bgColor="#FFFFFF"></uv-gap>
						</view>
						<view class=" display-flex align-items space-between margin-top-20" @click="navigateTo('/pages/my/subordinate?id=' + item.id + '&mobile=' + item.mobile)">
							<view class="font-size-24 text-center margin-right-20">
								总开卡<br />{{item.show_card_count.open_card_all}}
							</view>
							<view class="font-size-24 text-center ">
								本月开卡<br />{{item.show_card_count.open_month_card_all}}
							</view>
							<view class="font-size-24 text-center margin-right-20">
								本周开卡<br />{{item.show_card_count.open_week_card_all}}
							</view>
							<view class="font-size-24 text-center ">
								今日开卡<br />{{item.show_card_count.open_today_card_all}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uv-datetime-picker ref="datetimePicker" mode="date" :maxDate="Date.now()" @confirm="confirm">
		</uv-datetime-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack,
		timestampToDate
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	onLoad(function(option) {});
	onShow(function() {});
	const date = ref(timestampToDate(Date.now(), 'Y/m/d'))
	const datetimePicker = ref(null)
	//分页
	const pagingState = ref(false)
	const page = ref(1)
	const mobile=ref('')
	const list = ref([])
	const userinfo = ref()
	const info = ref()
	onLoad(function(option) {
		son_list()
	});
	onShow(function() {});

	function tabs(event) {
		console.log(event);
		tab.value = event.tab
		//分页
		pagingState.value = false
		mobile:mobile.value
		page.value = 1
		list.value = []
		son_list()
	}
	function search(){
		list.value = []
		pagingState.value = false
		page.value = 1
		son_list()
	}
	function confirm(event) {
		date.value = timestampToDate(event.value, 'Y/m')
		son_list()
	}
	async function son_list() {
		let object = {
			page: page.value,
			// tab: tab.value,
			mobile:mobile.value,
			date: date.value
		}
		if (!pagingState.value) {
			const {
				code,
				data
			} = await api.son_list(object)
			userinfo.value = data.user
			// info.value = data
			list.value = list.value.concat(data.list.data)
			if (data.list.current_page == data.list.last_page) {
				pagingState.value = true
				return
			}
			page.value++
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		son_list()
	});
</script>

<style scoped lang="scss">
	.viewitem {
		padding: 20rpx;
		background: #F8F8F7;
		border-radius: 15rpx;
	}

	.time {
		width: 173rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #C3DAFC;
	}

	.view {
		padding: 25rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	// .button {
	// 	width: 122rpx;
	// 	height: 42rpx;
	// 	background: #F8F8F7;
	// 	border-radius: 21rpx;
	// 	border: 1px solid #C3DAFC;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	font-size: 22rpx;
	// 	color: #2671CE;
	// }

	.background {
		width: 690rpx;
		height: 240rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
		background: url('/static/jfbg.png');
	}
</style>